<script setup lang="ts">
import TitleGroup from "@/components/FormRowTitle/index.vue";
import { reactive, ref } from "vue";
import { cloneDeep } from "@pureadmin/utils";
const props = defineProps({
  status: {
    type: String,
    default: "add"
  },
  tradeRetailPlanId: {
    type: String,
    default: "null"
  },
  dictList: {
    type: Object
  }
});

const form = reactive({
  data: {
    name: undefined,
    years: undefined,
    month: undefined,
    plusDeviationExemScale: undefined,
    plusDeviationExamRate: undefined,
    minusDeviationExemScale: undefined,
    minusDeviationExamRate: undefined,
    electricDeviation: undefined,
    nonExam: undefined,
    applicableObject: undefined,
    cancellationClause: undefined,
    status: 1
  },
  rules: {
    name: [{ required: true, message: "请输入套餐名称", trigger: "blur" }],
    years: [{ required: true, message: "请输入套餐生效年", trigger: "blur" }],
    month: [{ required: true, message: "请输入套餐持续月份", trigger: "blur" }],
    plusDeviationExemScale: [
      { required: true, message: "请输入正偏差免考比例", trigger: "blur" }
    ],
    plusDeviationExamRate: [
      { required: true, message: "请输入正偏差考核费率", trigger: "blur" }
    ],
    minusDeviationExemScale: [
      { required: true, message: "请输入负偏差免考比例", trigger: "blur" }
    ],
    minusDeviationExamRate: [
      { required: true, message: "请输入负偏差考核费率", trigger: "blur" }
    ],
    electricDeviation: [
      { required: true, message: "请输入申报电量偏差", trigger: "blur" }
    ],
    nonExam: [{ required: true, message: "请输入免考核机制", trigger: "blur" }],
    applicableObject: [
      { required: true, message: "请输入适用对象", trigger: "blur" }
    ],
    cancellationClause: [
      { required: true, message: "请输入解约条款", trigger: "blur" }
    ],
    status: [{ required: true, message: "请选择当前状态", trigger: "change" }]
  }
});
const formRules = ref(null);
const validateForm = () => {
  return new Promise(resolve => {
    formRules.value.validate(valid => {
      resolve(valid);
    });
  });
};
const getFormData = () => {
  let data = cloneDeep(form.data);
  return data;
};
const defaultFormData = reactive({
  data: {}
});
const setForm = formData => {
  defaultFormData.data = cloneDeep(formData);
  form.data = cloneDeep(formData);
};
const resetForm = () => {
  form.data = cloneDeep(defaultFormData.data);
};
defineExpose({
  form,
  formRules,
  validateForm,
  getFormData,
  setForm,
  resetForm
});
</script>

<template>
  <div class="w-full">
    <el-form
      ref="formRules"
      class="display-block"
      :model="form.data"
      label-width="160px"
      :rules="form.rules"
      :disabled="status === 'look'"
    >
      <TitleGroup title="基础信息">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="套餐名称" prop="name">
              <el-input v-model="form.data.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套餐生效年" prop="years">
              <el-input-number
                v-model="form.data.years"
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套餐持续月份" prop="month">
              <el-input-number
                v-model="form.data.month"
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申报电量偏差" prop="electricDeviation">
              <el-input
                v-model="form.data.electricDeviation"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="正偏差免考比例" prop="plusDeviationExemScale">
              <el-input-number
                v-model="form.data.plusDeviationExemScale"
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="正偏差考核费率" prop="plusDeviationExamRate">
              <el-input-number
                v-model="form.data.plusDeviationExamRate"
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负偏差免考比例" prop="minusDeviationExemScale">
              <el-input-number
                v-model="form.data.minusDeviationExemScale"
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负偏差考核费率" prop="minusDeviationExamRate">
              <el-input-number
                v-model="form.data.minusDeviationExamRate"
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="免考核机制" prop="nonExam">
              <el-input v-model="form.data.nonExam" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="适用对象" prop="applicableObject">
              <el-input
                v-model="form.data.applicableObject"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="解约条款" prop="cancellationClause">
              <el-input
                v-model="form.data.cancellationClause"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前状态" prop="status">
              <el-select v-model="form.data.status" placeholder="请选择">
                <el-option
                  v-for="item in dictList.data.status"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </TitleGroup>
    </el-form>
  </div>
</template>
